<template>
  <div class="container">
    <map
      id="map"
      longitude="113.324520"
      latitude="23.099994"
      scale="14"
      :controls="controls"
      @controltap="controltap"
      :markers="markers"
      @markertap="markertap"
      :polyline="polyline"
      @regionchange="regionchange"
      show-location
      @tap='mapclick'
      style="width: 100%; height: 300px;"
    ></map>
    <view class="map_text">
      <text class="h1">名称：{{textData.name}}</text>
      <text>位置：{{textData.desc}}</text>
      <button
        plain
        class='btn'
        type="primary"
        @tap="loa"
      >使用当前位置</button>
    </view>
  </div>
</template>

<script>
// import Vue from 'vue'

import DatePicker from '@/components/form/datePicker'
import SinglePicker from '@/components/form/singlePicker'
export default {
  components: {
    DatePicker,
    SinglePicker
  },

  data () {
    return {
      markers: [
        {
          iconPath: '/static/images/others.png',
          id: 0,
          latitude: 23.099994,
          longitude: 113.32452,
          width: 50,
          height: 50
        }
      ],
      polyline: [
        {
          points: [
            {
              longitude: 113.3245211,
              latitude: 23.10229
            },
            {
              longitude: 113.32452,
              latitude: 23.21229
            }
          ],
          color: '#FF0000DD',
          width: 2,
          dottedLine: true
        }
      ],
      controls: [
        {
          id: 1,
          iconPath: '/static/images/location.png',
          position: {
            left: 0,
            top: 300 - 50,
            width: 50,
            height: 50
          },
          clickable: true
        }
      ]
    }
  },
  onLoad (option) {
    // let continent = Object.keys(dist)
    // this.multiArray.push(continent)
    // this.multiArray.push(dist[continent[0]])
  },
  created () {
    console.log('test')
  },

  methods: {
    loa () {
      const key = 'N75BZ-UTB3K-7GGJW-AVMIL-MDT36-RYFTQ' // 使用在腾讯位置服务申请的key
      const referer = 'sports' // 调用插件的app的名称
      const location = JSON.stringify({
        latitude: 39.89631551,
        longitude: 116.323459711
      })
      const category = '生活服务,娱乐休闲'

      wx.navigateTo({
        url: `plugin://chooseLocation/index?key=${key}&referer=${referer}&location=${location}&category=${category}`
      })
    },
    mapclick () {
      var that = this
      console.log('地图点击')
      wx.chooseLocation({
        success (res) {
          console.log('地图点击事件：' + JSON.stringify(res))
          let userLongitude = res.longitude
          let userLagitude = res.latitude
          let userAddress = res.address
          let nowAddress = {}
          nowAddress['name'] = res.name
          nowAddress['desc'] = res.address
          that.setData({
            lagitude: userLongitude,
            longitude: userLagitude,
            addressName: userAddress,
            textData: nowAddress
          })
        },
        fail (res) {
          console.log('点击地图fail:' + JSON.stringify(res))
        },
        complete (res) {
          // complete
          console.log('点击地图complete:' + JSON.stringify(res))
        }
      })
    },
    regionchange (e) {
      console.log(e)
      console.log(e.mp.type)
    },
    markertap (e) {
      console.log(e)
      console.log(e.mp.markerId)
    },
    controltap (e) {
      console.log(e)
      console.log(e.mp.controlId)
    }
  }
}
</script>

